// 返回顶部按钮js
const el = document.querySelector('.top')
window.addEventListener('scroll', function () {
   //获取页面滚动的距离
   const n = document.documentElement.scrollTop
   if (n > 70) {
      //侧边栏显示
      el.style.opacity = 1
   } else {
      //侧边栏隐藏
      el.style.opacity = 0
   }
})

const backTop = document.querySelector('.songSheet-header')
backTop.addEventListener('click', function () {
   document.documentElement.scrollTop = 0
})


// 播放按钮高亮js
const ply = document.querySelectorAll('.hd .ply')
for (let i = 0; i < ply.length; i++) {
   ply[i].addEventListener('click', function () {
      document.querySelector('.hd .active').classList.remove('active')
      ply[i].classList.add('active')
   })
}

// 喜欢这个歌单的人循环
const lis = document.querySelectorAll('.like-sing li')
for (let i = 0; i < lis.length; i++) {
   lis[i].innerHTML = `
   <a href="#">
   <img src="./images/items-${i}.jpg" alt="">
   </a>
   `
}
// 热门歌单js
const obj = [
   {
      img1: './images/info1.jpg',
      title: 'EDM·电子音乐 | 制作人百首热单推荐&',
      uname: 'MIAO喵缪',
      img2: './images/hot-sing1.png',
   },
   {
      img1: './images/info2.jpg',
      title: '【信仰】Trance Music（持续更新）',
      uname: 'RaveBoy',
      img2: './images/hot-sing2.png'
   },
   {
      img1: './images/info3.jpg',
      title: '想谈恋爱 想送你一冰箱的花',
      uname: '梦见我学会游泳',
      img2: './images/hot-sing3.png'
   },
   {
      img1: './images/info4.jpg',
      title: '慢慢听慢慢爱 降速歌单(0.8x)',
      uname: '祺睿祺睿-真的爱...',
      img2: './images/hot-sing4.png'
   },
   {
      img1: './images/info5.jpg',
      title: '华语民谣：故事和你，如酒浓烈',
      uname: '樱桃220221',
      img2: './images/hot-sing5.png'
   }
]
const hotSing = document.querySelectorAll('.hot-sing-list li')
for (let i = 0; i < hotSing.length; i++) {
   hotSing[i].innerHTML = `
   <div class="hot-sing-left">
   <a href="#">
   <img src="${obj[i].img1}" alt="">
   </a>
   </div>
   <div class="hot-sing-right">
   <p class="p-t">
   <a href="#" class="a-t">${obj[i].title}</a>
   </p>
   <p class="p-b">
   <span class="span-b">by</span>
   <a href="#" class="a-b">${obj[i].uname}</a>
   <img src="${obj[i].img2}" alt="" class="img-b">
   </p>
   </div>
   `
}


// 评论框js
const tx = document.querySelector('.m-cmmtipt .u-txt')
const zs = document.querySelector('.m-cmmtipt .zs')
tx.addEventListener('input', function () {
   const val = tx.value
   zs.innerHTML = 140 - val.length
})
const a = document.querySelector('.btns .pinglun')
const com = document.querySelector('.comments')
const txt = document.querySelector('.user-name .txt')
const cmmts = document.querySelector('.cmmts')
a.addEventListener('click', function (e) {
   e.preventDefault()
   const val = tx.value.trim()
   if (val === '') return alert('请输入内容')
   tx.value = ''
   zs.innerHTML = 140
   const divNode = document.createElement('div')
   divNode.classList.add('comments')
   const time = new Date()
   const YYYY = time.getFullYear()
   const MM = time.getMonth() + 1
   const DD = time.getDate()
   console.log(YYYY);

   divNode.innerHTML = `
   <div class="head">
   <a href="#">
      <img src="./images/info3.jpg">
   </a>
</div>
<div class="cmmt-text">
   <div class="user-name">
      <div class="po">
      <a href="#">晚风吹行舟</a>
      <img src="./images/user-pic-2.png" alt=""  class="xx">
      <img src="./images/vip.png" alt="" class="vip">
      </div>
     <p class="txt"> ：${val}</p>                    
   </div>
   <div class="rp">
      <div class="time">
         ${YYYY}年${MM}月${DD}日
      </div>
      <div class="zan">
         <a href="#">
            <i></i>
            (18796)
         </a>
         <span>|</span>
         <a href="#">回复</a>
      </div>
   </div>
</div>
   `
   cmmts.appendChild(divNode)
})
// 回车发布评论
tx.addEventListener('keyup', function (e) {
   if (e.key === 'Enter') {
      a.click()
   }
})




 //阻止所有的a刷新界面
 const as=document.querySelectorAll('.f-updown a')
 for (let i=0;i<as.length;i++) {
    as[i].addEventListener('click',function(e) {
    e.preventDefault()
 })
 }
 //底部显示隐藏
 const hand = document.querySelector('.f-updown')
 const lock = document.querySelector('.lock a')
 let flag=true
 hand.addEventListener('mouseenter', function () {
    document.querySelector('.f-updown').style.bottom = 0
 })
 function fn() {
    document.querySelector('.f-updown').style.bottom = '-45px'
 }
 hand.addEventListener('mouseleave', fn)
 //锁
 lock.addEventListener('click',function() {
    flag=!flag
    if (flag) {
       lock.classList.remove('lockdown')
       hand.addEventListener('mouseleave', fn)
    } else {
       lock.classList.add('lockdown')
       document.querySelector('.f-updown').style.bottom = 0
       hand.removeEventListener('mouseleave', fn)
    }
    
 })
 //进度条
 const ready=document.querySelector('.ready')
 const curser=document.querySelector('.pbar .curser')
 curser.onmousedown=function(e) {
    e=e||window.e
    const progressLeft = e.clientX - this.offsetLeft
    document.onmousemove = function(e) {
    e=e||window.e
       const progressX = e.clientX - progressLeft
       if(progressX<=0){
             progressX = 0;
         }
         else if(progressX>=493){
             progressX = 493;
         }
       curser.style.left=progressX+'px'
       ready.style.width=progressX+'px'
 }
    document.onmouseup = function(e){
         e = e || window.e
         document.onmousemove = null
         document.onmouseup = null
     }
     return false
 }
 //播放按钮切换
 const play=document.querySelector('.btns .play')
 play.addEventListener('click',function() {
    flag=!flag
    if(flag) {
       play.classList.add('palse')
    } else {
       play.classList.remove('palse')
    }
 })
 //音量
 const vol=document.querySelector('.volume')
 vol.addEventListener('click',function() {
    flag=!flag
    if(flag) {
       document.querySelector('.m-vol').style.display='block'
    } else {
       document.querySelector('.m-vol').style.display='none'
    }
 })
 //音量大小调节
 const vbtn=document.querySelector('.curr .btn')
 const vcur=document.querySelector('.vbg .curr')
 vbtn.onmousedown=function(e) {
    e=e||window.e
    const progressTop =e.clientY - this.offsetTop
    document.onmousemove = function(e) {
    e=e||window.e
       let progressY =e.clientY - progressTop
       if(progressY>=0){
             progressY = 0;
         }
         else if(progressY<=-90){
             progressY = -90;
         }
      //  vbtn.style.top=-5+progressY+'px'
       vcur.style.height= -progressY+'px'
 }
    document.onmouseup = function(e){
         e = e || window.e
         document.onmousemove = null
         document.onmouseup = null
     }
     return false
 }
 //随机播放
 const mode=document.querySelector('.mode')
 const playmode=['随机','单曲循环','循环']
 let f=0
 mode.addEventListener('click',function() {
    if(f>2) f=0
    document.querySelector('.modetip').style.display='block'
    document.querySelector('.modetip').innerHTML=playmode[f]
    if (f===0) {
       document.querySelector('.mode').classList.remove('mode1')
       document.querySelector('.mode').classList.remove('mode2')
    }
    if (f===1) {
       document.querySelector('.mode').classList.add('mode1')
    }
    if (f===2) {
       document.querySelector('.mode').classList.add('mode2')
    }
    f++
 })
 mode.addEventListener('mouseleave',function() {
    document.querySelector('.modetip').style.display='none'
 })
 //播放列表
 const clos=document.querySelector('.f-close')
 clos.addEventListener('click',function() {
    document.querySelector('.f-playlist').style.display='none'
 })
 const showadd=document.querySelector('.controls .add')
 showadd.addEventListener('click',function() {
    flag=!flag
    document.querySelector('.f-playlist').style.display=flag?'block':'none'
 })

 